<!-- 煤场管理 -->
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Refresh } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus'

//table-list
const tableHeight = ref(0)
// 定义表格数据的类型
interface TableRow {
    bunkerId: number;
}
const listTableData = ref([])

// 保存选中项的 ID 列表
const selectedRowIds = ref<Set<number>>(new Set());

// 处理选中项变化的函数
const handleSelectionChange = (selection: TableRow[]) => {
    // 更新选中项 ID 列表
    selectedRowIds.value = new Set(selection.map((item) => item.bunkerId));
};

// 自定义行类名的函数
const rowClassName = ({ row }: { row: TableRow }): string => {
    return selectedRowIds.value.has(row.bunkerId) ? 'selected-row' : '';
};
const rowInfoClassName = (id:number) => {
    return selectedRowIds.value.has(id) ? 'selected_bg' : '';
}
const headerCellStyle = {
    padding: '16px 0'
}

// 新增
const addDialogVisible = ref(false)
const addForm = ref({
    bunkerType: '',
    bunkerName: '',
    stackNo: '',
    posNo: '',
    maxCoalWeight: '',
    stackLength: '',
    stackWidth: '',
    stackInRad: '',
    stackOutRad: '',
    deviceLength: '',
    maxElevation: '',
    minElevation: '',
    ip: '',
    port: '',
    remark: '',
})

// 修改
const editDialogVisible = ref(false)
const editForm = ref<any>({
    bunkerType: '',
    bunkerName: '',
    stackNo: '',
    posNo: '',
    maxCoalWeight: '',
    stackLength: '',
    stackWidth: '',
    stackInRad: '',
    stackOutRad: '',
    deviceLength: '',
    maxElevation: '',
    minElevation: '',
    ip: '',
    port: '',
    remark: '',
})

import { FuelBunkerTRecordList, addFuelBunkerTRecord, editFuelBunkerTRecord, delFuelBunkerTRecord, FuelBunkerTRecordInfo } from "@/api";

// 搜索
const searchForm = ref({
    BunkerName: '',
    BunkerType: '', //1-圆形，2-条形,3-异形

    PageNum: 1, //当前页码
    PageSize: 10 //PageSize
})
const totalPage = ref(0)

const searchFormRef = ref<FormInstance>()
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    searchForm.value.PageNum = 1
    postFuelBunkerTRecordList()
}
//list
const postFuelBunkerTRecordList = () => {
    console.log('searchForm-------',searchForm.value)
    FuelBunkerTRecordList(searchForm.value).then(res=>{
        console.log('list-------',res.data)
        listTableData.value = res.data.result
        totalPage.value =  res.data.totalNum
    })
}

//新增
const postAddFuelBunkerTRecord = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            addFuelBunkerTRecord(addForm.value).then(res=>{
                console.log('新增----',res)
                if(res.code === 200){
                    ElMessage({
                        type: 'success',
                        message: '添加成功',
                    })
                    addDialogVisible.value = false
                    addForm.value = {
                        bunkerType: '',
                        bunkerName: '',
                        stackNo: '',
                        posNo: '',
                        maxCoalWeight: '',
                        stackLength: '',
                        stackWidth: '',
                        stackInRad: '',
                        stackOutRad: '',
                        deviceLength: '',
                        maxElevation: '',
                        minElevation: '',
                        ip: '',
                        port: '',
                        remark: '',
                    }
                    postFuelBunkerTRecordList()
                }
                else{
                    ElMessage.error(res.msg)
                }
            })
        } else {
        console.log('error submit!', fields)
        }
    })
    
}

//修改
const postEditFuelBunkerTRecord = () => {
    console.log('editForm----',editForm.value)
    editFuelBunkerTRecord(editForm.value).then(res=>{
        console.log('修改----',res)
        if(res.code === 200){
            ElMessage({
                type: 'success',
                message: '修改成功',
            })
            editDialogVisible.value = false
            postFuelBunkerTRecordList()
        }
        else{
            ElMessage.error(res.msg)
        }
    })
}

const editDialogShow = (data:any) => {
    editForm.value = data
    editDialogVisible.value = true
}
// 详情 
function getFuelBunkerTRecordInfo(id:number){
    FuelBunkerTRecordInfo(id).then(res=>{
        console.log('详情----',res.data)
        editForm.value = res.data
        editDialogVisible.value = true
    })
}

// 删除
const clickDelFuelBunkerTRecord = (id:string) => {
    ElMessageBox.confirm(
        '是否确定删除，删除后不能恢复?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
        }
    )
    .then(() => {
        delFuelBunkerTRecord(id).then(res=>{
            console.log('删除----',res)
            if(res.code === 200){
                ElMessage({
                    type: 'success',
                    message: '已成功删除',
                })
                postFuelBunkerTRecordList()
            }
            else{
                ElMessage.error('删除失败，请重新删除')
            }
        })
    })
}

// 批量删除
const batchDel = () => {
    if(selectedRowIds.value.size == 0){
        ElMessage.error('请先选择要批量删除的数据')
    }
    else{
        let ids: string = Array.from(selectedRowIds.value).join(', ');
        delFuelBunkerTRecord(ids).then(res=>{
            console.log('删除----',res)
            if(res.code === 200){
                ElMessage({
                    type: 'success',
                    message: '已成功删除',
                })
                postFuelBunkerTRecordList()
            }
            else{
                ElMessage.error('删除失败，请重新删除')
            }
        })
    }
}

const ruleFormRef = ref<FormInstance>()
const rules = ref({
    bunkerType: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    bunkerName: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    stackNo: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    posNo: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    maxCoalWeight: [
        { required: true, message: '请输入', trigger: 'blur' },
    ]
})



onMounted(() => {
    // 获取页面高度
    tableHeight.value = window.innerHeight - 310;
    postFuelBunkerTRecordList()
});


</script>
<template>
    <!-- 弹出框/新增 -->
    <el-dialog v-model="addDialogVisible" title="新增煤场" width="900" :align-center="true">
        <div class="dialog_main">
            <el-form ref="ruleFormRef" :rules="rules" :inline="true" :model="addForm" class="mt15 form-inline-row-two" label-width="auto" >
                <el-form-item label="煤场类型:" prop="bunkerType">
                    <el-select v-model="addForm.bunkerType" placeholder="请选择">
                        <el-option label="圆形" value="1" />
                        <el-option label="条形" value="2" />
                        <el-option label="异形" value="3" />
                    </el-select>
                </el-form-item>
                <el-form-item label="煤场名称:" prop="bunkerName">
                    <el-input v-model="addForm.bunkerName" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="煤场位置编号:" prop="stackNo">
                    <el-input v-model="addForm.stackNo" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="测点编号:" prop="posNo">
                    <el-input v-model="addForm.posNo" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="最大容量:" prop="maxCoalWeight">
                    <el-input v-model="addForm.maxCoalWeight" placeholder="请输入" />
                </el-form-item>
                <el-form-item ></el-form-item>
                <el-form-item label="长:">
                    <el-input v-model="addForm.stackLength" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="宽:">
                    <el-input v-model="addForm.stackWidth" placeholder="请输入" />
                </el-form-item>

                <el-form-item label="内圆半径:">
                    <el-input v-model="addForm.stackInRad" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="外圆半径:">
                    <el-input v-model="addForm.stackOutRad" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="基准长度:">
                    <el-input v-model="addForm.deviceLength" placeholder="请输入" />
                </el-form-item>
                <el-form-item ></el-form-item>
                <el-form-item label="取最大俯角:">
                    <el-input v-model="addForm.maxElevation" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="最小俯角:">
                    <el-input v-model="addForm.minElevation" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="IP地址:">
                    <el-input v-model="addForm.ip" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="端口号:">
                    <el-input v-model="addForm.port" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="备注:" style="width: 92%;">
                    <el-input v-model="addForm.remark" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入" />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer-center">
                <el-button type="primary" color="#2565C8" style="width: 130px;" @click="postAddFuelBunkerTRecord(ruleFormRef)">
                    添加
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 弹出框/修改 -->
    <el-dialog v-model="editDialogVisible" title="修改煤场" width="900" :align-center="true">
        <div class="dialog_main">
            <el-form :inline="true" :model="editForm" class="mt15 form-inline-row-two" label-width="105" >
                <el-form-item label="煤场类型:">
                    <el-select v-model="editForm.bunkerType" placeholder="请选择">
                        <el-option label="圆形" value="1" />
                        <el-option label="条形" value="2" />
                        <el-option label="异形" value="3" />
                    </el-select>
                </el-form-item>
                <el-form-item label="煤场名称:">
                    <el-input v-model="editForm.bunkerName" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="煤场位置编号:">
                    <el-input v-model="editForm.stackNo" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="测点编号:">
                    <el-input v-model="editForm.posNo" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="最大容量:">
                    <el-input v-model="editForm.maxCoalWeight" placeholder="请输入" />
                </el-form-item>
                <el-form-item ></el-form-item>
                <el-form-item label="长:">
                    <el-input v-model="editForm.stackLength" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="宽:">
                    <el-input v-model="editForm.stackWidth" placeholder="请输入" />
                </el-form-item>

                <el-form-item label="内圆半径:">
                    <el-input v-model="editForm.stackInRad" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="外圆半径:">
                    <el-input v-model="editForm.stackOutRad" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="基准长度:">
                    <el-input v-model="editForm.deviceLength" placeholder="请输入" />
                </el-form-item>
                <el-form-item ></el-form-item>
                <el-form-item label="取最大俯角:">
                    <el-input v-model="editForm.maxElevation" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="最小俯角:">
                    <el-input v-model="editForm.minElevation" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="IP地址:">
                    <el-input v-model="editForm.ip" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="端口号:">
                    <el-input v-model="editForm.port" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="备注:" style="width: 92%;">
                    <el-input v-model="editForm.remark" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入" />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer-center">
                <el-button type="primary" color="#2565C8" style="width: 130px;" @click="postEditFuelBunkerTRecord">
                    修改
                </el-button>
            </div>
        </template>
    </el-dialog>

    <div class="search_bor_bg">
        <el-form  ref="searchFormRef" :inline="true" :model="searchForm" class="from_search_inline" label-width="75">
            <el-form-item label="煤场名称:"  prop="BunkerName">
                <el-input v-model="searchForm.BunkerName" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="煤场类型:"  prop="BunkerType">
                <el-select v-model="searchForm.BunkerType" placeholder="请选择">
                    <el-option label="圆形" value="1" />
                    <el-option label="条形" value="2" />
                    <el-option label="异形" value="3" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" color="#2565C8"  @click="postFuelBunkerTRecordList">搜索</el-button>
                <el-button style="padding:0 8px;"  @click="resetForm(searchFormRef)">
                    <el-icon size="20">
                        <Refresh />
                    </el-icon>
                </el-button>
            </el-form-item>
        </el-form>
    </div>

    <div class="box_bg mt15">
        <div class="record_set">
            <el-button type="primary" color="#2565C8" @click="addDialogVisible = true">新增</el-button>
            <el-button type="primary" color="#2565C8" @click="batchDel">批量删除</el-button>
        </div>
        <div class="table_list mt15">
            <el-table
                :data="listTableData" 
                size="large" 
                :border="false" 
                :stripe="false" 
                :highlight-current-row="false"
                :height="tableHeight"
                :header-cell-style="headerCellStyle"
                style="width: 100%;" 
                :row-class-name="rowClassName"
                ref="multipleTableRef"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="50" align="right" />
                <el-table-column type="expand">
                    <template #default="props">
                        <!-- props.row -->
                        <div class="table_list_info" :class="rowInfoClassName(props.row.bunkerId)">
                            <div class="table_info">
                                <table>
                                    <tr>
                                        <th>长</th>
                                        <th>宽</th>
                                        <th>内圆半径</th>
                                        <th>外圆半径</th>
                                        <th>圆台高度</th>
                                        <th>基准长度</th>
                                        <th>最大俯角</th>
                                        <th>最小俯角</th>
                                        <th>IP地址</th>
                                        <th>端口号</th>
                                        <th>备注</th>
                                    </tr>
                                    <tr>
                                        <td>{{ props.row.stackLength }}</td>
                                        <td>{{ props.row.stackWidth }}</td>
                                        <td>{{ props.row.stackInRad }}</td>
                                        <td>{{ props.row.stackOutRad }}</td>
                                        <td>{{ props.row.stackCircHigh }}</td>
                                        <td>{{ props.row.deviceLength }}</td>
                                        <td>{{ props.row.maxElevation }}</td>
                                        <td>{{ props.row.minElevation }}</td>
                                        <td>{{ props.row.ip }}</td>
                                        <td>{{ props.row.port }}</td>
                                        <td>{{ props.row.remark }}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="煤场类型" prop="bunkerType" >
                    <template #default="props">
                        <span v-if="props.row.bunkerType == 1">圆形</span>
                        <span v-if="props.row.bunkerType == 2">条形</span>
                        <span v-if="props.row.bunkerType == 3">异形</span>
                    </template>
                </el-table-column>
                <el-table-column label="煤场名称" prop="bunkerName" />
                <el-table-column label="煤场位置编号" prop="stackNo" />
                <el-table-column label="测点编号" prop="posNo" />
                <el-table-column label="最大容量" prop="maxCoalWeight" />
                <el-table-column label="当前总价值" prop="curPrice" />
                <el-table-column label="当前热值" prop="curHeat" />
                <el-table-column label="当前体积" prop="curBulk" />
                <el-table-column label="当前容量" prop="curWeight" />
                <el-table-column label="最后盘煤时间" prop="lastInventoryTime" />
                <el-table-column align="center" label="操作" min-width="120">
                    <template #default="scope">
                        <div class="table_btn">
                            <a href="javascript:;" @click="clickDelFuelBunkerTRecord(scope.row.bunkerId)">删除</a>|
                            <a href="javascript:;" @click="editDialogShow(scope.row)">修改</a>
                        </div>
                    </template>
                </el-table-column>

            </el-table>
        </div>
        <div class="pagination">
            <el-pagination v-model:current-page="searchForm.PageNum" v-model:page-size="searchForm.PageSize" @current-change="postFuelBunkerTRecordList" :total="totalPage"  background layout="prev, pager, next" />
        </div>

    </div>

</template>
<style scoped lang="scss">

::v-deep(.el-table__body-wrapper){
    background: #F6FAFE !important;
}
::v-deep(.el-table__inner-wrapper:before){
    display: none; //下边线
}
::v-deep(.el-table thead th) {
  color: #333 !important;
  background: #CCDDF9;
}
::v-deep(.el-table__body){
    border-spacing: 0px 13px !important;
}
::v-deep(.el-table__row td){
    border-top:1px solid #E0E5ED !important;
    border-bottom:1px solid #E0E5ED !important;
}
::v-deep(.el-table__row td:first-child){
    border-left:1px solid #E0E5ED !important;
}
::v-deep(.el-table__row td:last-child){
    border-right:1px solid #E0E5ED !important;
}
::v-deep(.el-table__row:hover td){
    background: #ecf5ff!important;
}
::v-deep(.el-table__expanded-cell){
    border:1px solid #E0E5ED !important;
    padding:0 !important;
    //border-top: none !important; 
}
// ::v-deep(.el-table__expanded-cell td){
//     background: #ecf5ff!important;
// }
::v-deep(.el-table__expanded-cell:hover) {
  background-color: #ecf5ff !important;
}
::v-deep(.el-table__row.selected-row td){
    background: #FFDE9A !important;
}
</style>
